import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import Template from '../components/study/Template.vue'
import RefUse from '../components/study/RefUse.vue'
import ComputedAttribute from '../components/study/ComputedAttribute.vue'
import BindHtmlClass from '../components/study/BindHtmlClass.vue'
import IfElseConpiment from '../components/study/IfElseConpiment.vue'
import forCompoment from '../components/study/ForCompoment.vue'
import eventCompomnet from '../components/study/EventCompomnet.vue'
import formCompoment from '../components/study/FormCompoment.vue'
import vuelifecycle from '../components/study/Vuelifecycle.vue'
import watchCompoment from '../components/study/WatchCompoment.vue'
import watchPostVue2Compoment from '../components/study/WatchPostVue2Compoment.vue'
import watchPostVue3Compoment from '../components/study/WatchPostVue3Compoment.vue'
import watchEffectCompoment from '../components/study/WatchEffectCompoment.vue'
import refUse2Reactive from '../components/study/RefUse2Reactive.vue'
import templateRefCompoment from '../components/study/TemplateRefCompoment.vue'
import webComponentBase from '../components/study/compoments/WebComponentBase.vue'
import compomentDef from '../components/study/deepcompoments/CompomentDef.vue'
import propsCompoment from '../components/study/deepcompoments/PropsCompoment.vue'
import emitEvent from '../components/study/deepcompoments/EmitEvent.vue'
import vmodelParent from '../components/study/deepcompoments/VmodelParent.vue'
import attributesCompoment from '../components/study/deepcompoments/AttributesCompoment.vue'
import fatherButtonCompoment from '../components/study/deepcompoments/FatherButtonCompoment.vue'
import slotsCompoment from '../components/study/deepcompoments/SlotsCompoment.vue'
import injectCompomentTest from '../components/study/deepcompoments/injectprovider/InjectCompomentTest.vue'
import asyncComp from '../components/study/deepcompoments/async/AsyncComp.vue'
import compositeFunc from '../components/study/deepcompoments/compositefunction/CompositeFunc.vue'
import customDirectives from '../components/study/deepcompoments/custominstructions/CustomDirectives.vue'
import pluginCmp from '../components/study/deepcompoments/plugins/PluginCmp.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue'),
    },
    {
      path: '/template',
      name: '模板语法',
      component: Template,
    },
    {
      path: '/refUse',
      name: '响应式基础',
      component: RefUse,
    },
    {
      path: '/refUse2Reactive',
      name: 'ref和Reactive区别',
      component: refUse2Reactive,
    },
    {
      path: '/computedAttribute',
      name: '计算属性',
      component: ComputedAttribute,
    },
    {
      path: '/bindHtmlClass',
      name: 'Class 与 Style 绑定',
      component: BindHtmlClass,
    },
    {
      path: '/ifElseConpiment',
      name: '条件渲染',
      component: IfElseConpiment,
    },
    {
      path: '/forCompoment',
      name: '列表渲染',
      component: forCompoment,
    },
    {
      path: '/eventCompomnet',
      name: '事件处理',
      component: eventCompomnet,
    },
    {
      path: '/formCompoment',
      name: 'form表单',
      component: formCompoment,
    },
    {
      path: '/vuelifecycle',
      name: 'vue生命周期',
      component: vuelifecycle,
    },
    {
      path: '/watchCompoment',
      name: 'vue侦听器',
      component: watchCompoment,
    },
    {
      path: '/watchPostVue2Compoment',
      name: 'vue2侦听器',
      component: watchPostVue2Compoment,
    },
    {
      path: '/watchPostVue3Compoment',
      name: 'vue3侦听器',
      component: watchPostVue3Compoment,
    },
    {
      path: '/watchEffectCompoment',
      name: 'watchEffect用法',
      component: watchEffectCompoment,
    },
    {
      path: '/templateRefCompoment',
      name: '模板引用用法',
      component: templateRefCompoment,
    },
    {
      path: '/webComponentBase',
      name: '组件基础用法',
      component: webComponentBase,
    },
    {
      path: '/compomentDef',
      name: '全局局部组件定义',
      component: compomentDef,
    }
    , {
      path: '/propsCompoment',
      name: 'Props',
      component: propsCompoment,
    }
    , {
      path: '/emitEvent',
      name: '组件事件',
      component: emitEvent,
    }
    , {
      path: '/vmodelParent',
      name: '父子组件v-model绑定',
      component: vmodelParent,
    },
    {
      path: '/attributesCompoment',
      name: '透传 Attributes',
      component: attributesCompoment,
    },
    {
      path: '/fatherButtonCompoment',
      name: '父子组件Attributes',
      component: fatherButtonCompoment,
    },
    {
      path: '/slotsCompoment',
      name: '插槽内容传递slots',
      component: slotsCompoment,
    },
    {
      path: '/injectCompomentTest',
      name: '依赖注入测试',
      component: injectCompomentTest,
    }
    , {
      path: '/asyncComp',
      name: '异步组件',
      component: asyncComp,
    }
    , {
      path: '/compositeFunc',
      name: '组合函数测试',
      component: compositeFunc,
    }
    , {
      path: '/customDirectives',
      name: '自定义指令',
      component: customDirectives,
    },
    {
      path: '/pluginCmp',
      name: '插件开发',
      component: pluginCmp,
    },
  ],
})

export default router
